<template>
  <div class="review">
    <span v-show="inForm">点击图片进行修改游戏头像, 预览: </span><br>
    <avatar-cropper  :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper>
    <el-image  @click.native="open" class="gameimage" :src="gameimage"></el-image>
    <div class="gamename">{{ gamename }}</div>
    <div class="gameinfo">{{gameinfo}}</div>

  </div>
</template>

<script>
import avatarCropper from "@/components/atom/headimage";

export default {
  name: "brief",
  data(){
    return{
      dialogVisible:false,
      gametype: {
        personal: "@private",
        teamwork: "@public"
      },
      gameimage: "./resource/image/default-game.bmp",

    }
  },
  methods:{
    upload_it() {
      let newImage = this.$store.state.image.my_crop_image
      console.log(newImage.type)
      this.gameimage = URL.createObjectURL(newImage)
    },
    open() {
      if (this.inForm)this.dialogVisible = true;
    }
  },
  components:{
    avatarCropper
  },
  props:{
    gamename: String,
    gameinfo: String,
    gamemode: String,
    inForm: Boolean
  }
}
</script>

<style scoped lang="less">
.review {
  height: 140px;
  margin-bottom: 20px;


  .gameimage {
    width: 100px;
    height: 100px;

  }
  .gameinfo{
    .text();
    top: -100px;
    white-space: pre-line;
    width: 300px;
    height: 60px;

  }

  .text{
    position: relative;
    color: whitesmoke;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    left: 110px;
    max-width: 300px;
  }
  .gamename {
    .text();
    top: -100px;
    font-size: 34px;
  }
}
</style>